<template>
  <div class="seal-editor-wrapper page-miH page-bgBack">
    <PageHeader @back="back" subTitle="返回"> </PageHeader>

    <div class="edit-seal-editor-content">
      <div class="seal-editor-content-block">
        <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
          <a-form-item label="印章名称">
            <a-input
              v-decorator="['name', { rules: [{ required: true, message: '请输入印章名称！' }] }]"
              placeholder="请输入印章名称"
              allow-clear
              @input="(e) => (name = e.target.value)"
            />
            <div class="seal-editor-content-block-tip">用于区别您的印章，不显示在印章图片上</div>
          </a-form-item>
          <a-form-item label="企业名称">
            <a-input v-model="roundText" placeholder="请输入企业名称" allow-clear />
            <div class="seal-editor-content-block-tip">
              企业名称需要和营业执照上的企业名称一致，申请开通中不允许修改，通过申请后会显示在印章上
            </div>
          </a-form-item>
          <a-form-item label="企业法人">
            <a-input v-model="legalPerson" placeholder="请输入企业法人" allowClear :maxLength="4" />
            <div class="seal-editor-content-block-tip">填写法人后会生成法人章，合同签署时可以选择是否使用，最多输入 4 个字</div>
          </a-form-item>
          <a-form-item label="横向文">
            <a-input v-model="rowText" placeholder="此处填写横向文" allow-clear />
          </a-form-item>
          <a-form-item label="下弦文">
            <a-input v-model="bottomText" placeholder="此处填写下弦文" allow-clear />
          </a-form-item>
          <a-form-item label="印章类型">
            <div class="seal-editor-type-wrapper">
              <div :class="{ active: enterpriseSealType === 'STAR' }" class="seal-editor-type" @click="setType('STAR')">
                <img src="../../../assets/img/seal-circle.png" />
              </div>
              <div :class="{ active: enterpriseSealType === 'OVAL' }" class="seal-editor-type" @click="setType('OVAL')">
                <img src="../../../assets/img/seal-oval.png" />
              </div>
            </div>
          </a-form-item>
          <a-form-item label="印章颜色">
            <div class="seal-editor-color-wrapper">
              <div :class="{ active: color === 'RED' }" class="seal-editor-color red" @click="setColor('RED')" />
              <div :class="{ active: color === 'BLACK' }" class="seal-editor-color black" @click="setColor('BLACK')" />
              <div :class="{ active: color === 'BLUE' }" class="seal-editor-color blue" @click="setColor('BLUE')" />
            </div>
          </a-form-item>
        </a-form>
      </div>
      <div class="seal-editor-content-block border">
        <div class="seal-editor-content-block-title">预览图</div>
        <div class="seal-editor-seal-wrapper">
          <seal
            v-model="sealString"
            :round-text="roundText"
            :row-text="rowText"
            :bottom-text="bottomText"
            :type="enterpriseSealType === 'STAR' ? 'circle' : enterpriseSealType"
            :color="color"
          />
        </div>
        <div
          v-if="legalPersonText && legalPersonText.length && legalPersonText.length > 0"
          class="seal-editor-seal-wrapper"
          style="width: 170px; height: 170px; margin-top: 24px"
        >
          <div
            id="legalPersonSeal"
            style="
              width: 140px;
              height: 140px;
              font-size: 50px;
              border: 8px solid red;
              color: red;
              font-weight: 500;
              position: relative;
              line-height: 56px;
            "
          >
            <div
              v-for="(lt, lt_i) in legalPersonText"
              :key="lt_i"
              :style="`top: ${lt_i === 0 || lt_i === 2 ? '16px' : '76px'}; left: ${lt_i === 0 || lt_i === 1 ? '66px' : '8px'};`"
              style="position: absolute; width: 62px; height: 62px; line-height: 31px"
            >
              {{ lt }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="edit-seal-editor-footer">
      <a-button type="primary" @click="submit"> 确认并{{ this.id === null ? "添加" : "更新" }}</a-button>
    </div>
  </div>
</template>
<script>
import Seal from "../../../components/Seal";
import { sealCreateReq, sealDetailReq, sealUpdateReq } from "@/api/company/contract";
import { isContainByString } from "@/utils/index";
import html2canvas from "html2canvas";
export default {
  components: {
    Seal
  },
  data() {
    return {
      form: this.$form.createForm(this, { name: "coordinated" }),
      isContainByString,
      id: null,
      name: "",
      roundText: "此处为企业名称",
      rowText: "此处为横向文",
      bottomText: "此处为下弦文",
      legalPerson: "法人章",
      enterpriseSealType: "STAR",
      color: "RED",
      sealString: "",
      companyId: this.$store.state.hr.companyId
    };
  },
  computed: {
    legalPersonText() {
      if (this.legalPerson) {
        let tail = "";
        switch (this.legalPerson.length) {
          case 2:
            tail = "之印";
            break;
          case 3:
            tail = "印";
            break;
          default:
            break;
        }
        return `${this.legalPerson}${tail}`.split("");
      }
      return [];
    }
  },
  created() {
    if (this.$route.params.id) {
      this.id = this.$route.params.id;
      this.loadSeal();
    }
  },
  methods: {
    setType(type) {
      this.enterpriseSealType = type;
    },
    setColor(color) {
      this.color = color;
    },
    submit() {
      this.form.validateFields(async (err, values) => {
        if (!err) {
          const legalPersonPicture = await this.getLegalPersonSeal("legalPersonSeal");
          const body = {
            name: this.name,
            roundText: this.roundText,
            rowText: this.rowText,
            bottomText: this.bottomText,
            legalPerson: this.legalPerson,
            legalPersonPicture: legalPersonPicture,
            isLegalPerson: !!this.legalPerson,
            enterpriseSealType: this.enterpriseSealType,
            color: this.color,
            sealString: this.sealString,
            subjectId: this.isContainByString("contractAdmin") ? "0" : this.companyId
          };
          if (this.id) {
            body["id"] = this.id;
            sealUpdateReq(body)
              .then((res) => {
                this.$message.success("印章更新成功");
                this.$router.back();
              })
              .catch((err) => {
                console.log("debug log --> ", err);
              });
          } else {
            sealCreateReq(body)
              .then((res) => {
                this.$message.success("印章添加成功");
                this.$router.back();
              })
              .catch((err) => {
                console.log("debug log --> ", err);
              });
          }
        }
      });
    },
    back() {
      this.$router.back();
    },
    loadSeal() {
      sealDetailReq(this.id)
        .then((res) => {
          const { name, roundText, rowText, bottomText, legalPerson, enterpriseSealType, color, sealString } = res.data;
          this.name = name;
          this.roundText = roundText;
          this.rowText = rowText;
          this.bottomText = bottomText;
          this.legalPerson = legalPerson;
          this.enterpriseSealType = enterpriseSealType;
          this.color = color;
          this.sealString = sealString;
          this.form.setFieldsValue({
            name: name
          });
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    async getLegalPersonSeal(id) {
      if (document.getElementById(id)) {
        return await html2canvas(document.getElementById(id), {
          useCORS: true,
          windowWidth: document.body.scrollWidth,
          windowHeight: document.body.scrollHeight,
          allowTaint: true,
          taintTest: false,
          backgroundColor: null
        }).then((canvas) => {
          const imgURL = canvas.toDataURL("image/png");
          return imgURL;
        });
      } else {
        return null;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.head {
  padding: 20px;
  width: 100%;
  display: flex;
  text-align: center;
  line-height: 60px;
  justify-content: space-between;
  .left {
    color: #595959;
    font-size: 20px;
    margin-top: 18px;
  }
}
.edit-seal-editor-content {
  width: 100%;
  overflow: auto;
  padding: 20px;
  display: flex;
  flex-direction: row;
  .seal-editor-content-block {
    flex: 1;
    padding: 0 30px;
    &.border {
      border-left: 1px solid #e8e8e8;
    }
  }
  .seal-editor-content-block-title {
    font-size: 18px;
    font-weight: 500;
    color: #666;
    line-height: 26px;
    margin-bottom: 30px;
    position: relative;
    padding-left: 20px;
    &:before {
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -4px;
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: var(--primary);
    }
  }
  .seal-editor-content-block-tip {
    font-size: 14px;
    color: #999;
    line-height: 24px;
  }
}
.edit-seal-editor-footer {
  width: 100%;
  padding: 20px;
  text-align: right;
  background: #fff;
  border-top: 1px solid #e8e8e8;
}
.ant-input::-webkit-input-placeholder {
  color: #ccc !important;
}
</style>
